<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .countent {
            background-color: #f5f5f5;
            width: 632px;
            margin: 100px auto;
        }

        .box {
            height: 340px;
            position: relative;
        }

        li {
            list-style: none;
            width: 5px;
            height: 5px;
            background-color: rgb(175, 33, 33);
            float: left;
            margin: 8px 10px;
            border-radius: 50%
        }

        .box ul {
            width: 100px;
            height: 20px;
            /* background-color: aqua; */
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            cursor: pointer;

        }

        .active {
            background-color: #fff;
            border-radius: 50%
        }

        .span-left {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            left: 10px;
            cursor: pointer;
        }

        .span-right {
            width: 20px;
            height: 20px;
            position: absolute;
            top: 50%;
            margin-top: -10px;
            right: 10px;
            cursor: pointer;
        }

        .wenzi {
            position: absolute;
            bottom: 10px;
            left: 10px;
        }
    </style>
</head>

<body>
    <div class="countent">
        <div class="box">
            <div class="boximg">
                <img src="./image/xmad_1.jpg" alt="" style="vertical-align: top;">
            </div>
            <div class="wenzi">
                <p class="tiale">你好啊！</p>
            </div>
            <span class="span-left">&lt;</span>
            <span class="span-right">&gt;</span>
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>


    <script>
        let data = [
            { url: './image/xmad_1.jpg', tilte: '你好啊！', bcolor: '#f5f5f5' },
            { url: './image/xmad_2.jpg', tilte: '小米手机就好好用。', bcolor: 'red' },
            { url: './image/xmad_3.jpg', tilte: '不愧是你啊，真厉害！', bcolor: 'black' },
        ]

        const box = document.querySelector('.box')
        const img = document.querySelector('img')
        const tiale = document.querySelector('.tiale')
        const spanleft = document.querySelector('.span-left')
        const spanright = document.querySelector('.span-right')
        const wenzibj = document.querySelector('.wenzi')

        let i = 0
        spanright.addEventListener('click', function () {
            i++
            i = i >= data.length ? 0 : i
            img.src = data[i].url

            tiale.innerHTML = data[i].tilte
            wenzibj.style.backgroundColor = data[i].bcolor
            document.querySelector('.box .active').classList.remove('active')
            document.querySelector(`.box li:nth-child(${i + 1})`).classList.add('active')
        })
        spanleft.addEventListener('click', function () {
            i--
            i = i < 0 ? data.length - 1 : i
            img.src = data[i].url
            tiale.innerHTML = data[i].tilte
            wenzibj.style.backgroundColor = data[i].bcolor
            document.querySelector('.box .active').classList.remove('active')
            document.querySelector(`.box li:nth-child(${i + 1})`).classList.add('active')
        })

        let itmes = setInterval(function () {
            spanright.click()
        }, 3000)
        //鼠标经过
        box.addEventListener('mouseenter', function () {
            clearInterval(itmes)
        })
        // 鼠标离开
        box.addEventListener('mouseleave', function () {
            clearInterval(itmes)
            itmes = setInterval(function () {
                spanright.click()
            }, 3000)
        })

        // Data: 点击小点就跳到那张图片
        const li = document.querySelectorAll('li')
        for (let i = 0; i < li.length; i++) {
            li[i].addEventListener('click', function () {
                // console.log(li);
                document.querySelector('.box .active').classList.remove('active')
                this.classList.add('active')
                img.src = data[i].url
            })
        }

    </script>
</body>

</html>